<template>
    <Drawer :title="title" v-model="show" width="720" :mask-closable="false" 
        @on-close="show = false"
        :styles="{ height: 'calc(100% - 55px)', overflow: 'auto', paddingBottom: '53px', position: 'static' }">

        <Form ref="validForm" :model="formData" :rules="ruleValidate">
            <FormItem label="标题名" label-position="top" prop="name" :error="error.name">
                <Input v-model="formData.name" placeholder="请输入标题名称" />
            </FormItem>

            <FormItem label="发布时间" label-position="top" prop="publishTime" :error="error.publishTime">
                <DatePicker type="datetime" v-model="formData.publishTime" style="width: 100%;"
                            placeholder="请选择出生日期"/>
            </FormItem>

            <FormItem label="结束时间(该时间过后、该公告不再显示)" label-position="top" prop="endTime" :error="error.endTime">
                <DatePicker type="datetime" v-model="formData.endTime" style="width: 100%;"
                            placeholder="请选择出生日期"/>
            </FormItem>
            
            <FormItem label="" label-position="top" :error="error.state">
                <div>发布内容</div>
                <ckeditor class="editor" :editor="editor" v-model="formData.content" :config="editorConfig" @ready="onReady"></ckeditor>
            </FormItem>
        </Form>

        <div class="demo-drawer-footer">
            <Button style="margin-right: 8px" @click="show = false">关闭</Button>
            <Button type="primary" @click="handleForm">保存</Button>
        </div>
    </Drawer>
</template>

<script>
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn';
// import {  SimpleUploadAdapter } from '@ckeditor/ckeditor5-upload';

export default {
    components: {
        ckeditor: CKEditor.component,
    },
    props: {
        modelValue: {type: Boolean, required: true} ,
        title: {required: true, type: String},
        row: {type: Object, required: true},
    },
    data() {
        return {
            editor: ClassicEditor, 
            editorConfig: {
                toolbar: {
                    items: [
                        'heading',
                        '|',
                        'bold',
                        'italic',
                        'link',
                        'bulletedList',
                        'numberedList',
                        '|',
                        'outdent',
                        'indent',
                        '|',
                        'imageUpload',
                        'blockQuote',
                        'insertTable',
                        '|',
                        'undo',
                        'redo',
                    ]
                },
                language: "zh-cn",
            },
            error: {} ,
            formData: this.row, 
            ruleValidate: {
                name: [
                    {required: true, message: "标题名不允许为空",  trigger: "blur"},
                ]
            }
        }
    },
    methods: {
        
        onReady(editor) {
            //console.log(editor.plugins) ; // 使用 FileRepository 相对简单，不需要进行其他配置
            let that = this ;
            editor.plugins.get("FileRepository").createUploadAdapter =  (loader) => {
                return {
                    upload() {
                        //loader.file.then(file => that.uploadImage(file));
                        return {default: "https://file.iviewui.com/images/image-demo-3.jpg"}  
                    }
                }
            };
        } ,  
        handleForm() {
            this.error = {} ;
            this.$refs.validForm.validate(valid => {
                if (valid) {
                    if (this.row.id != null) {
                        this.handleUpdate();
                    }else{
                        this.handleSave();
                    }
                }
            })
        },
        handleUpdate() {
            // 处理修改
        },
        handleSave() {
            // 处理保存
        }
    },
    computed: {
        show: {
            get() {
                return this.modelValue ;
            },
            set(val) {
                this.$emit("update:model-value", val);
            }
        }
    }
}

</script>

<style scoped>
.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}


</style>

<style>
.ck-content {
    min-height: 400px;
}
</style>